<?php
    include_once "../../db.php";
    $conn = mysqli_connect("localhost","root","root","db_info");
    $sql = "select * from ".'tb_article';
    //		echo $sql;
    //		die();
    $query = mysqli_query($conn,$sql);
    $list = array();
    while($result = mysqli_fetch_assoc($query)){
        $list[] = $result;
    }

?>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>layuiAdmin</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>

<table id="demo" lay-filter="test"></table>
</body>
</html>
<!--顶部操作栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>
<!--每条数据的操作栏-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    <!-- 这里同样支持 laytpl 语法，如： -->
    {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
    {{#  } }}
</script>
<script type="text/html" id="editDialog">
    <form class="layui-form" action="" style="padding: 20px;" id="modify" lay-filter="editDialogForm">
        <div class="layui-form-item">
            <label class="layui-form-label">文章标题</label>
            <div class="layui-input-inline">
                <input type="text" name="title" placeholder="请输入新文章标题" autocomplete="off" class="layui-input" required>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">热门文章</label>
            <div class="layui-input-inline">
                <input type="radio" name="isRecommend" value="1" title="是" required>
                <input type="radio" name="isRecommend" value="0" title="否" checked required>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="mainText">正文</label>
            <div class="layui-input-block">
                <textarea id="mainText" style="width:99%;height:250px">
                </textarea>
            </div>
        </div>

    </form>
</script>
<script src="../js/jquery-3.5.1.js"></script>
<script src="../layui/layui.all.js"></script>
<script src="../iceeditor/iceEditor.js"></script>
<script src="../js/common.js"></script>
<script>
    layuiModules=['table', 'layer','form'];



    function mounted() {
        //第一个实例
        table.render({
            elem: '#demo'
            , toolbar: '#toolbarDemo'
            , height: 550
            , defaultToolbar: []
            , url: 'articleList.php' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {checkbox: true, LAY_CHECKED: false}
                , {field: 'id', title: '文章ID', width: 100, sort: true}
                , {field: 'title', title: '文章标题', width: 300}
                , {field: 'release_time', title: '发布时间', width: 200}
                , {field: 'user_id', title: '发布者UID', width: 100}
                , {field: 'isRecommend', title: '热门文章', width: 90}
                , {fixed: 'right', width: 160, align: 'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
            ,id: 'mainReLoad'
        });
        //监听事件
        table.on('toolbar(test)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id);

            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 1,
                        title: '新建文章',
                        area:['100%','100%'],
                        content: $('#editDialog').html(), //这里content是一个普通的String
                        btn: ['确定', '取消'],
                        success: function (index, layero) {
                            form.render();
                        },
                        yes: function (index, layero) {
                            let data = {};
                            let t = $('#modify').serializeArray();
                            $.each(t, function() {
                                data [this.name] = this.value;
                            });
                            let text = newText.getHTML();
                            $.post('../connect.php',{
                                type: 'newArt',
                                title: data.title,
                                isRecommend: data.isRecommend,
                                text
                            },function (data){
                                if(data === '1'){
                                    layer.msg('添加成功')
                                    layer.close(index)
                                }else{
                                    console.log(data)
                                    layer.msg('添加失败')
                                }
                            })
                            },
                        btn2: function (index, layero) {
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    });
                    break;
                case 'delete':
                    console.log(checkStatus);
                    layer.confirm('真的删除选中行么', function (index) {
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                    break;
            }
            let newText = new ice.editor('mainText')
            newText.uploadUrl = "../iceEditor/upload.php";
        });



        //监听工具条
        table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'detail') { //查看
                //do something
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    // 向服务端发送删除指令
                    $.post('../connect.php',{
                        type: 'delArt',
                        id: obj.data.id
                    },function (data){
                        console.log(data)
                        if(data === '0'){
                            layer.msg('删除失败')
                        }
                    })
                });
            } else if (layEvent === 'edit') { //编辑
                //do something
                layer.open({
                    type: 1,
                    title: '编辑文章信息',
                    area:['100%','100%'],
                    content: $('#editDialog').html(), //这里content是一个普通的String
                    btn: ['确定', '取消'],
                    success: function (index, layero) {
                        form.render();
                        form.val("editDialogForm",data);
                        $.post('../connect.php',{
                            type: 'getArc',
                            id: obj.data.id
                        },function (data){
                            newText.setValue(data);
                        })
                    },
                    yes: function (index, layero) {
                         let data = {};
                         let t = $('#modify').serializeArray();
                         $.each(t, function() {
                             data [this.name] = this.value;
                         });
                         let text = newText.getHTML();
                         $.post('../connect.php',{
                             type: 'modifyArt',
                             targetid: obj.data.id,
                             title: data.title,
                             isRecommend: data.isRecommend,
                             text
                         },function (data){
                             // console.log(data);
                             let newData = $.parseJSON(data)
                             newData.status ? layer.msg('修改成功') : layer.msg('修改失败')
                             let update = newData.newArticle
                             obj.update({
                                 id: update.id,
                                 isRecommend: +update.isRecommend? '是':'否',
                                 release_time: update.release_time,
                                 user_id: update.user_id,
                                 title: update.title
                             })
                         })
                        layer.close(index);
                    },
                    btn2: function (index, layero) {
                        layer.msg('关闭')
                    }
                });

                //同步更新缓存对应的值
                obj.update({
                    id: data.id,
                    isRecommend: +data.isRecommend? '是':'否',
                    release_time: data.release_time,
                    user_id: data.user_id,
                    title: data.title
                });
                let newText = new ice.editor('mainText')
                newText.uploadUrl = "../iceEditor/upload.php";
            }
        });
    }


</script>
